<template>
  <div class="footer">
    <div v-for="(item, index) in footer" :key="index" class="footer_item">
      <a-icon :type="item.icon" />
      <div style="margin-left:6px">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      footer: [
        { name: "Phone", icon: "font-size" },
        { name: "Notes", icon: "font-size" },
        { name: "History", icon: "font-size" }
      ]
    };
  }
};
</script>

<style lang="scss">
.footer {
  height: 40px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  background: #fff;
  display: flex;
  flex-direction: row;
  padding: 0 20px !important;

  .footer_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    padding: 0 10px;
  }
}
</style>